<template>
  <div style="position: relative;width: 100%;height: 100%;display: flex;align-items: center;">
<!--    <a-select v-model:value="month" style="width: auto;position: absolute;top:0px;left:0px;z-index: 1000;margin-top: 6px" @change="handleChange"-->
<!--              size="small">-->
<!--      <a-select-option :value="item" v-for="item in monthList" :key="item">-->
<!--        {{ item }}-->
<!--      </a-select-option>-->
<!--    </a-select>-->
<!--    <a-segmented v-model:value="value" :options="data" style="position: absolute;top:0px;left:80px;z-index: 1000;margin-left: 5px;margin-top: 3px"/>-->
<!--    <a-select v-model:value="mode2" @change="handleChange" style="width:auto;position: absolute;top:0px;margin-top: 6px;left:370px;z-index: 1000"-->
<!--              size="small">-->
<!--      <a-select-option value="all">-->
<!--        全流程-->
<!--      </a-select-option>-->
<!--      <a-select-option value="oversea">-->
<!--        海外仓-->
<!--      </a-select-option>-->
<!--    </a-select>-->
    <div class="map" style="position: absolute;" ref="water"></div>
    <div class="map" style="position: absolute;left:50%" ref="water1"></div>
  </div>
  <!--  <QuestionCircleOutlined style="position: absolute;top: 10px;right: 10px;cursor: pointer;color:#777777"/>-->
</template>
<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from "echarts"
import "echarts-liquidfill"
import dayjs from 'dayjs'
const water = ref(null);
const water1 = ref(null);
const month = ref('');
const list = ref([]);
const obj = ref([]);
const echartsObj = ref({});
const echartsObj1 = ref({});
let myWater
let myWater1
const props = defineProps({
  obj:{
    type: Object,
  }
})
const selectMonth = (selected) => {
  try {
    list.value.forEach(item => {
      if (item.month === selected) {
        echartsObj.value = item
      }
    })
    list1.value.forEach(item => {
      if (item.month === selected) {
        echartsObj1.value = item
      }
    })
    console.log('selectMonth',echartsObj.value, echartsObj1.value)
  } catch (e) {
    console.log(e)
  }
}

const initOption = (subtext, color, data) => {
  let option = {
    title: [
      {
        subtext,
        top: "80px",
        left: "center",
        subtextStyle: {
          color: "#fff",
          fontSize: 23,
          fontWeight: 300,
          fontFamily: "PingFangSC-Regular",
          top: "center"
        },
        itemGap: 10, //主副标题间距
        textStyle: {
          fontWeight: "normal",
          rich: {
            a: {
              padding: [0, 0, 70, 0],
              fontWeight: "normal",
              fontSize: 36,
              color: "#fff",
              fontFamily: "DINAlternate-Bold",
              textShadow: [5, 5, 10, "#7ff06fff"]
            },
          }
        }
      }],
    series: [{
      type: 'liquidFill',
      radius: '90%',
      data,
      color,
      label: {
        normal: {
          color: '#fff',
          insideColor: 'transparent',
          textStyle: {
            fontSize: 16,
            fontWeight: 300,
            fontFamily: 'Microsoft YaHei'
          },
          formatter: function (param) {
            return (param.value * 1).toFixed(2); // 显示百分比，保留四位小数
          },
          position: ['50%', '70%']
        },
      },
      outline: {
        show: true,
        borderDistance: 5,
        itemStyle: {
          borderColor: color,
          borderWidth: 2
        }
      },
      backgroundStyle: {
        color
      }
    }]

  }

  return option
}

const handleData = (inventory_rate, sales_ratio) => {
  myWater.clear();
  myWater1.clear();
  myWater.setOption(initOption('库存周转率', '#196898', [inventory_rate, inventory_rate, inventory_rate]));
  myWater1.setOption(initOption('库销比', '#2BA982', [sales_ratio, sales_ratio, sales_ratio]));
}

const init = async () => {
  handleData(props.obj.inventory_rate || 0, props.obj.sales_ratio || 0)
}
watch(() => props.obj, (newVal, oldVal) => {
  if(!myWater){
    myWater = echarts.init(water.value);
  }
  if(!myWater1){
    myWater1 = echarts.init(water1.value)
  }
  init()
})
defineExpose({
  init
})
</script>

<style scoped>
body {
  color: white
}

.map {
  height: 75%;
  width: 50%;
}

:deep(.ant-select-selector) {
  background-color: #093563 !important;
  color: #fff !important;
}

:deep(.ant-select-arrow) {
  color: #fff !important;
}
:deep(.ant-segmented-item){
  font-weight: 600 !important;
}
:deep(.ant-select-selector) {
  background-color: transparent !important;
  color: #009DFF !important;
  border: none !important;
}

:deep(.ant-select-arrow) {
  color: #009DFF !important;
}
</style>
